<template>
    <div class="page">
        <!-- search -->
        <div class=""
            style="display: flex;flex-direction: row;align-items: center;padding: 12px;background-color: #FFFFFF;">
            <div @click="popBack">
                <i class="iconfont" style="font-size: 16px;font-weight: bold;">&#xe73d;</i>
                <span style="font-size: 14px;">学校管理</span>
            </div>

            <!-- search -->
            <div
                style="margin-left: 12px;flex: 1;display: flex;align-items: center;flex-direction: row;background-color: #F1F1F1;height: 30px;border-radius: 15px;">
                <div class="iconfont icon-sousuo"
                    style="font-size: 16px;font-weight: bold;color: #999999;margin-right: 10px;margin-left: 10px;">
                </div>
                <input type="text" value="" placeholder="请输入关键字搜索"
                    style="font-size: 12px;flex: 1;border: none;background-color: #f1f1f1;" />
                <div style="width: 1px;height: 14px;background-color: #999999;" />
                <div style="font-size: 12px;color: #007AFF;padding:0 5px;width: 40px;text-align: center;">搜索</div>
            </div>
        </div>
        <!-- list -->
        <div style="flex:1;background-color: #f5f5f5;height:100vh;display: flex;justify-content: center;align-items: center;" v-if="!hasdata">
            <div style="font-size: 14px;color: #999999;">暂无数据</div>
        </div>
        <div class="" style="flex: 1;background-color: #F5F5F5;overflow-y: auto;" v-else>
            <!-- cell -->
            <div @click="loadDetial(item)" v-for="(item,idx) in list"
                style="padding: 12px; display: flex;flex-direction: row;align-items: center;background-color: #FFFFFF;">
                <!-- left -->
                <div style="flex: 1;flex-direction: column;display: flex;">
                    <div style="font-size: 16px;">{{item.schoolCnName}}</div>
                    <div style="font-size: 16px;" v-if="false">{{item.schoolEnName}}</div>
                    <div style="font-size: 12px;color: #999999;margin-top: 5px;">{{item.schCountry+"/"+item.schNature}}
                    </div>
                </div>
                <!-- right -->
                <div
                    style="padding: 5px;border-style: solid;border-width: 1px;border-color: #ebebeb;border-radius: 16px;max-width: 90px;">
                    <div style="text-align: center;font-size: 12px;display: block;">Internally
                        qualifed({{item.schFollowUpProgress || 0}})</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        schoolList
    } from "@/api/workbench.js"
    export default {
        data() {
            return {
                op: undefined,
                pageNum: 1,
                pageSize: 100,
                list: [],
                hasdata:true,
            };
        },
        created() {
            this.netSchoolList();
        },
        methods: {
            popBack() {
                this.$router.back({});
            },
            loadDetial(data) {
                this.$router.push({
                    path: "/school_detail",
                    query:{id:data.id}
                });
            },

            netSchoolList() {
                let fi = {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                };
                let self = this;
                schoolList(fi)
                    .then((res) => {
                        let { data } = res;
                        let { record } = data;
                        self.list = record;
                        self.hasdata = self.list.length > 0 ;
                    })
                    .catch((e) => {
                        console.error(e);
                    });
            },
        },
    };
</script>

<style scoped>
    .page {
        background-color: #f4f5f7;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        display: flex;
        height: 100%;
    }
</style>